<template>
  <div class="bread">
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item v-for="(item,index) in breadArr" :key="index">
        {{item.title}}
    </el-breadcrumb-item>

</el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "bread",
  props: [""],
  data() {
    return {
        breadArr:[],
    };
  },

  components: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {},
  watch: {
    $route: {
        deep: true,//对于嵌套层级较高的,加上deep
        immediate: true,    
        handler(val) {
            // console.log(12,val);
            this.breadArr=[];
            val.matched.forEach((item,index) => {
                if(index > 0){
                    this.breadArr.push({
                        title:item.meta.title
                    })
                }
            });
            // console.log(12,this.breadArr);
        },
    },
  },
    
};
</script>
<style scoped>
</style>